<template>
  <div>
    <div v-if="_.isEmpty(snList)" :class="textClass">
      {{ value }}
    </div>
    <el-popover width="450" trigger="hover" v-else>
      <el-table :data="snList" mix-height="300">
        <el-table-column min-width="200" :property="option.stockUsage" :label="$t('label_stock_usage')"
          :formatter="(r, c, v) => this.$enumShow(v, 'StockUsageEnum')"></el-table-column>
        <el-table-column min-width="250" :property="option.snCode" label="SN"></el-table-column>
      </el-table>
      <div slot="reference">
        <el-button type="text"><span :class="textClass">{{ value }}<i class="el-icon-arrow-down  el-icon--right"></i></span></el-button>
      </div>
    </el-popover>
  </div>
</template>
<script>

export default {

  props: {
    value: null,
    list: null,
    textClass:"",
    option:{
      type:Object,
      default:()=>({
        stockUsage:"stockUsage",
        snCode:"snCode",
      })
    }
  },
  computed: {
    snList() {
      return this.list ? this.list.filter(it => it[this.option.snCode]) : []
    },
  },

}
</script>
